<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HCL-32轻躁狂症自评表 - 专业心理测试</title>
    <style>
        :root {
            --primary-color: #FF9F43;
            --secondary-color: #FF6B6B;
            --success-color: #1DD1A1;
            --text-dark: #2D3436;
            --text-light: #636E72;
            --bg-gradient: linear-gradient(135deg, #F5F7FA 0%, #FFE6E6 100%);
        }

        body {
            background: var(--bg-gradient);
            font-family: 'Segoe UI', 'PingFang SC', system-ui;
            line-height: 1.6;
            color: var(--text-dark);
            min-height: 100vh;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        /* 标题样式 */
        .test-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .test-title {
            font-size: 2.2rem;
            color: var(--text-dark);
            margin-bottom: 15px;
        }

        /* 进度条 */
        .progress-bar {
            height: 8px;
            background: #EDF2F7;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background: var(--primary-color);
            width: 0;
            transition: width 0.4s ease;
        }

        /* 题目容器 */
        .question-container {
            background: white;
            border-radius: 16px;
            padding: 30px;
            margin: 30px 0;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        }

        /* 题目样式 */
        .question-text {
            font-size: 1.3rem;
            margin-bottom: 30px;
            color: var(--text-dark);
            font-weight: 500;
            line-height: 1.8;
        }

        /* 选项列表 */
        .options-list {
            display: grid;
            gap: 15px;
        }

        .option-item {
            padding: 18px 25px;
            background: #F8F9FA;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .option-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .option-item.selected {
            background: var(--primary-color);
            color: white;
            border-color: var(--secondary-color);
        }

        /* 导航按钮 */
        .nav-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }

        .nav-btn {
            padding: 12px 35px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .prev-btn {
            background: #EDF2F7;
            color: var(--text-light);
        }

        .next-btn {
            background: var(--secondary-color);
            color: white;
        }

        .nav-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* 结果页面 */
        .result-container {
            background: white;
            border-radius: 16px;
            padding: 40px;
            margin: 30px 0;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            text-align: center;
        }

        .result-title {
            font-size: 1.8rem;
            margin-bottom: 25px;
        }

        .result-score {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin: 20px 0;
        }

        .result-description {
            background: #F8F9FA;
            padding: 25px;
            border-radius: 12px;
            margin: 25px 0;
            text-align: left;
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }

            .test-title {
                font-size: 1.8rem;
            }

            .question-text {
                font-size: 1.1rem;
            }

            .option-item {
                padding: 15px 20px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="test-header">
        <h1 class="test-title">HCL-32轻躁狂症自评表</h1>
        <div class="progress-bar">
            <div class="progress" id="progress"></div>
        </div>
    </div>

    <div class="question-container" id="questionContainer">
        <div class="question-text" id="questionText"></div>
        <div class="options-list" id="optionsList"></div>
        <div class="nav-buttons">
            <button class="nav-btn prev-btn" onclick="prevQuestion()">上一题</button>
            <button class="nav-btn next-btn" onclick="nextQuestion()">下一题</button>
        </div>
    </div>

    <div class="result-container" id="resultContainer" style="display: none;">
        <h2 class="result-title">测评结果</h2>
        <div class="result-score" id="finalScore"></div>
        <div class="result-description" id="resultDescription"></div>
        <button class="nav-btn next-btn" onclick="location.reload()">重新测试</button>
        <a href="/test/">
            <button class="nav-btn"
                    style="background: var(--success-color);"
                    onclick="returnToHome()">返回主页
            </button>
        </a>
    </div>
    <form>
        {% csrf_token %}
    </form>
</div>

<script>
    const hclQuestions = [
        "我感到精力充沛，不需要太多睡眠",
        "我感到比平常更自信",
        "我比平常更健谈",
        "我的思维比平常更快",
        "我更容易分心",
        "我比平常更活跃",
        "我更容易冲动行事",
        "我更容易花钱或投资",
        "我更容易参与冒险活动",
        "我更容易与人发生冲突",
        "我更容易感到烦躁",
        "我更容易感到兴奋",
        "我更容易感到快乐",
        "我更容易感到愤怒",
        "我更容易感到焦虑",
        "我更容易感到悲伤",
        "我更容易感到内疚",
        "我更容易感到疲倦",
        "我更容易感到无助",
        "我更容易感到孤独",
        "我更容易感到无聊",
        "我更容易感到困惑",
        "我更容易感到恐惧",
        "我更容易感到嫉妒",
        "我更容易感到羞愧",
        "我更容易感到绝望",
        "我更容易感到自责",
        "我更容易感到自卑",
        "我更容易感到无助",
        "我更容易感到孤独",
        "我更容易感到无聊",
        "我更容易感到困惑"
    ];

    let currentQuestion = 0;
    let answers = new Array(32).fill(null);

    function updateProgress() {
        const progress = (currentQuestion / 32) * 100;
        document.getElementById('progress').style.width = `${progress}%`;
    }

    function showQuestion() {
        const questionText = document.getElementById('questionText');
        const optionsList = document.getElementById('optionsList');

        questionText.innerHTML = `${currentQuestion + 1}. ${hclQuestions[currentQuestion]}`;

        optionsList.innerHTML = '';
        const options = ['没有', '有时', '经常', '总是'];
        options.forEach((option, index) => {
            const li = document.createElement('div');
            li.className = `option-item ${answers[currentQuestion] === index ? 'selected' : ''}`;
            li.innerHTML = `
                    ${String.fromCharCode(65 + index)}、${option}
                `;
            li.onclick = () => selectOption(index);
            optionsList.appendChild(li);
        });

        document.querySelector('.prev-btn').style.visibility = currentQuestion > 0 ? 'visible' : 'hidden';
    }

    function selectOption(score) {
        answers[currentQuestion] = score;
        showQuestion();
    }

    function nextQuestion() {
        if (answers[currentQuestion] === null) return alert('请选择当前题目答案');
        if (currentQuestion < 31) {
            currentQuestion++;
            showQuestion();
            updateProgress();
        } else {
            calculateResult();
        }
    }

    function prevQuestion() {
        if (currentQuestion > 0) {
            currentQuestion--;
            showQuestion();
            updateProgress();
        }
    }

    function calculateResult() {
        let total = answers.reduce((sum, score) => sum + score, 0);//标准分！！
        fetch('/test/score/', {  // 替换为你的后端接口
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: JSON.stringify({
                score: total.toFixed(1),
                test_name: 'HCL-32'
            })
        })
        let description = '';

        if (total < 14) {
            description = "正常范围：无明显轻躁狂症状";
        } else if (total < 20) {
            description = "轻度轻躁狂：建议关注情绪变化，适当调节";
        } else if (total < 26) {
            description = "中度轻躁狂：建议寻求专业心理咨询";
        } else {
            description = "重度轻躁狂：建议立即联系专业医疗机构";
        }
        document.getElementById('questionContainer').style.display = 'none';
        document.getElementById('resultContainer').style.display = 'block';
        document.getElementById('finalScore').textContent = `总分：${total}`;
        document.getElementById('resultDescription').innerHTML = `
                <h3>结果解读：</h3>
                <p>${description}</p>
                <h3>注意事项：</h3>
                <ul>
                    <li>本测试结果仅供参考，不能作为临床诊断依据</li>
                    <li>建议结合其他评估和专业人士意见</li>
                    <li>如有需要请及时联系心理援助热线</li>
                </ul>
            `;
    }

    // 初始化
    showQuestion();
    updateProgress();
</script>
</body>
</html>